"use client"

import { useState, useEffect } from 'react'
// import HeroLines from "@/public/assets/hero/hero-lines.png"
// import Image from "next/image"
// import SocialLinks from "../SocialLinks"
// import HeroContent from "./HeroContent"
// import HeroTool from "./HeroTool"

export default function HeroSection() {
  const [displayText, setDisplayText] = useState('')
  const [currentIndex, setCurrentIndex] = useState(0)
  const [started, setStarted] = useState(false)
  const fullText = "大家居AI数字营销陪跑领先服务商"

  // 延迟1秒开始动画
  useEffect(() => {
    const startTimer = setTimeout(() => {
      setStarted(true)
    }, 2000)
    
    return () => clearTimeout(startTimer)
  }, [])

  // 打字动画效果
  useEffect(() => {
    if (started && currentIndex < fullText.length) {
      const timer = setTimeout(() => {
        setDisplayText(prev => prev + fullText[currentIndex])
        setCurrentIndex(prev => prev + 1)
      }, 150)
      return () => clearTimeout(timer)
    }
  }, [started, currentIndex, fullText])

  const scrollToNext = () => {
    const nextSection = document.querySelector('#main > section:nth-child(2)')
    if (nextSection) {
      nextSection.scrollIntoView({ behavior: 'smooth' })
    }
  }

  return (
    <section id="home" className="min-h-screen flex items-center justify-center bg-white dark:bg-black relative overflow-hidden">
      {/* 背景网格图案 */}
      <div className="absolute inset-0 grid-pattern" />
      
      {/* 主要内容 */}
      <div className="relative z-10 text-center max-w-6xl mx-auto px-4 sm:px-6">
        {/* 主标题 - 针对移动端优化字体大小 */}
        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-8xl xl:text-9xl font-black leading-none tracking-tighter text-black dark:text-white mb-6 sm:mb-8">
          <span className="block sm:inline">{displayText}</span>
          <span className="animate-pulse">|</span>
        </h1>
        
        {/* ASCII下划线动画 - 移动端适配 */}
        <div className="font-mono text-sm sm:text-lg md:text-xl text-blue-600 mb-6 sm:mb-8 overflow-hidden">
          <div className="animate-pulse">
            <span className="hidden sm:inline">{'═'.repeat(Math.min(Math.floor(displayText.length * 1.5), 40))}</span>
            <span className="sm:hidden">{'═'.repeat(Math.min(Math.floor(displayText.length * 1.2), 20))}</span>
          </div>
        </div>
        
        {/* 英文副标题 - 移动端字体大小优化 */}
        <p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium text-gray-600 dark:text-gray-400 mb-8 sm:mb-12 tracking-wide px-4">
          Leading AI-Powered Digital Marketing Partner for Home & Living Industry
        </p>
        
        {/* CTA按钮组 - 移动端垂直布局优化 */}
        <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center px-4">
          <button 
            className="neo-brutal-btn w-full sm:w-auto text-sm sm:text-base"
            data-cursor-text="initiate"
          >
            开始增长
          </button>
          
          <button 
            className="neo-brutal-btn secondary w-full sm:w-auto text-sm sm:text-base"
            data-cursor-text="inspect"
          >
            预约演示
          </button>
        </div>
        
        {/* 装饰性几何图形 - 移动端隐藏部分装饰 */}
        <div className="absolute top-20 right-20 w-16 h-16 border-4 border-blue-600 transform rotate-45 animate-spin-slow hidden xl:block" />
        <div className="absolute bottom-20 left-20 w-12 h-12 bg-green-400 transform rotate-12 animate-pulse-slow hidden lg:block" />
        <div className="absolute top-1/2 right-4 sm:right-10 w-6 h-6 sm:w-8 sm:h-8 border-2 border-green-400 rounded-full animate-float hidden sm:block" />
      </div>
      
      {/* 滚动指示器 */}
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
        <div 
          className="scroll-indicator" 
          data-cursor-text="view"
          onClick={scrollToNext}
          role="button"
          aria-label="滚动到下一部分"
        >
          <div className="scroll-indicator-line"></div>
          <div className="scroll-indicator-dot"></div>
        </div>
      </div>
    </section>
  )
}
